<template>
  <div style="height: 6vh;background-color: #fff;padding: 10px 20px;">
    <span style="line-height: 60px;font-size: 20px">电影排片管理</span>
    <el-button type="primary" style="float: right;margin-top: 10px;" @click="addSchedulingDialogVisible=true"
    >排片</el-button>
  </div>
<!--  排片搜索卡片-->
  <el-card style="margin: 20px;">
  <el-form style="padding-top:10px;">
    <el-row :gutter="30">
      <el-col :span="5">
        <el-form-item label="门店:">
          <span style="color: #FF5722; font-weight: bold; text-shadow: 2px 2px 4px #000000; font-size: larger">{{cinemaName.name}}</span>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item label="影厅">
          <el-select v-model="searchScheduling.hallId"  placeholder="请选择影厅">
            <el-option
                v-for="hall in hallOptions"
                :key="hall.id"
                :label="hall.name"
                :value="hall.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="5">
        <el-form-item>
          <el-button @click="resetSearch">重置</el-button>
          <el-button type="primary"  @click="getScheduling">查询</el-button>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
  </el-card>
<!--  排片弹窗-->
  <el-dialog :title="dialogTitle" v-model="addSchedulingDialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="电影">
            <el-select placeholder="请选择电影" v-model="dialogForm.movieId">
              <el-option v-for="item in movieList" :label="item.movieName" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="影厅">
            <el-select v-model="dialogForm.hallId" placeholder="请选择影厅">
              <el-option
                v-for="hall in hallOptions"
                :key="hall.id"
                :label="hall.name"
                :value="hall.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="放映时间">
            <el-date-picker type="datetime" placeholder="选择日期时间"
                            format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s"
                            v-model="dialogForm.time"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="播放状态">
            <el-radio-group placeholder="请选择播放状态" v-model="dialogForm.status">
              <el-radio border label="播放中" value="播放中"></el-radio>
              <el-radio border label="等待中" value="等待中"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注">
            <el-input placeholder="请输入备注" v-model="dialogForm.notes"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveScheduling">保存</el-button>
    </template>
  </el-dialog>

    <!--  电影排片表格-->
    <el-card style="margin: 20px;">
      <el-table :data="cinemaList">
        <el-table-column type="index" width="80" align="center" prop="id" label="编号"></el-table-column>
        <el-table-column align="center" prop="movieName" label="电影"></el-table-column>
        <el-table-column align="center" prop="name" label="影厅"></el-table-column>
        <el-table-column align="center" prop="time" label="放映时间"></el-table-column>
        <el-table-column align="center" label="播放时长">
          <template #default="scope">
            {{ scope.row.durationMinutes }} 分钟
          </template>
        </el-table-column>
        <el-table-column align="center" prop="status" label="放映状态"></el-table-column>
        <el-table-column align="center" prop="notes" label="备注"></el-table-column>
        <el-table-column align="center" prop="createTime" label="创建时间"></el-table-column>
        <el-table-column align="center" prop="updateTime" label="修改时间"></el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" link @click="updateById(scope.row.id)">修改</el-button>
            <el-button type="primary" size="small" link @click="deleteById(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
</template>

<script setup>
import { onMounted, ref } from "vue";
import axios from "axios";
import qs from "qs";
import { ElMessage } from "element-plus";

// 定义排片弹窗
const addSchedulingDialogVisible = ref(false);
// 定义收集弹窗的数据
const dialogForm = ref({
  movieId: '',
  notes: '',
  time: '',
  status: ''
});
// 定义取消弹窗
const handleClose = () => {
  addSchedulingDialogVisible.value = false;
  dialogForm.value = {};
};
// 定义弹窗标题
const dialogTitle = ref('排片');
// 定义弹窗保存
const saveScheduling = () => {
  console.log('time的数据=' + dialogForm.value.time);
  dialogForm.value.cinemaId = cinemaId.value.cinemaId;
  let data = qs.stringify(dialogForm.value);
  console.log('data的数据=' + data);
  axios.post(BASE_URL + '/v1/scheduling/save', data).then((response) => {
    if (response.data.code == 2000) {
      ElMessage.success('保存成功!');
      getScheduling();
      handleClose();
      dialogForm.value = {};
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

// 定义保存搜索条件
const searchForm = ref({
  hallId: ''
});

// 定义保存门店名的id
const cinemaId = ref({
  cinemaId: ''
});
// 定义保存影院的名称
const cinemaName = ref({
  name: ''
});
// 定义保存用户的数据
const employee = ref({});
// 定义获取当前登录用户的数据
const employeelogin = ref(window.getEmployee());

// 定义方法获取影院名称
const getEmployee = async () => {
  try {
    const response = await axios.get(`${BASE_URL}/v1/employee/selectById?id=${employeelogin.value.id}`);
    if (response.data.code === 2000) {
      cinemaId.value = response.data.data;
      console.log('cinemaId的数据=' + cinemaId.value.cinemaId);

      // 获取影院名称
      const cinemaResponse = await axios.get(`${BASE_URL}/v1/cinemas/select?id=${cinemaId.value.cinemaId}`);
      if (cinemaResponse.data.code === 2000) {
        cinemaName.value = { name: cinemaResponse.data.data[0].name };
        console.log('cinemaName的数据=' + cinemaName.value.name);
      } else {
        ElMessage.error(cinemaResponse.data.msg);
      }
    } else {
      ElMessage.error(response.data.msg);
    }
  } catch (error) {
    console.error('Error in getEmployee:', error);
    ElMessage.error('请求失败，请稍后再试');
  }
};

// 定义保存电影排片数据
const cinemaList = ref([]);
// 定义保存电影排片搜索条件
const searchScheduling = ref({
  cinemaName: '',
  cinemaId: '',
  hallId: '',
  time: '',
  status: ''
});
// 定义查询电影排片
const getScheduling = () => {
  searchScheduling.value.cinemaName = cinemaName.value.name;
  let data = qs.stringify(searchScheduling.value);
  console.log('data的数据=' + data);
  axios.get(`${BASE_URL}/v1/scheduling/select?${data}`).then((response) => {
    if (response.data.code === 2000) {
      cinemaList.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};
//定义重置搜索条件
const resetSearch = () => {
  searchScheduling.value = { cinemaName: cinemaName.value.name , cinemaId: cinemaId.value.cinemaId, hallId: ''};
  getScheduling();
};

// 一进页面查询
onMounted(async () => {
  try {
    await getEmployee(); // 使用 await 确保 getEmployee() 完成
    await loadHalls();
    await getScheduling();
    await loadMovies();
  } catch (error) {
    console.error('Error in onMounted:', error);
  }
});

//定义删除电影排片的方法
const deleteById = (id) => {
  axios.delete(`${BASE_URL}/v1/scheduling/delete?id=${id}`).then((response) => {
    if (response.data.code === 2000) {
      ElMessage.success('删除成功!');
      getScheduling();
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

// 定义修改电影排片的方法
const updateById = (id) => {
  addSchedulingDialogVisible.value = true;
  dialogTitle.value = '修改排片';
  axios.get(`${BASE_URL}/v1/scheduling/selectById?id=${id}`).then((response) => {
    if (response.data.code === 2000) {
      dialogForm.value = response.data.data;
    } else {
      ElMessage.error(response.data.msg);
    }
  });
};

// 定义影厅选项数组
const hallOptions = ref([]);

// 获取影厅列表
const loadHalls = () => {
  searchScheduling.value.cinemaId = cinemaId.value.cinemaId;
  let data = qs.stringify(searchScheduling.value);
  axios.get(BASE_URL + '/v1/hall/select?'+data)
    .then((response) => {
      if (response.data.code === 2000) {
        hallOptions.value = response.data.data;
      } else {
        ElMessage.error(response.data.msg || '获取影厅列表失败');
      }
    })
    .catch((error) => {
      console.error('获取影厅列表失败:', error);
      ElMessage.error('获取影厅列表失败');
    });
};

//获取电影列表
const movieList = ref([]);
const loadMovies = () => {
  axios.get(BASE_URL + '/v1/movie/select')
    .then((response) => {
      if (response.data.code === 2000) {
        movieList.value = response.data.data.list;
      } else {
        ElMessage.error(response.data.msg || '获取电影列表失败');
      }
    })
    .catch((error) => {
      console.error('获取电影列表失败:', error);
    })
}


</script>


<style scoped>

</style>